import { init, h } from 'snabbdom'
// 1. 导入模块
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
import attributes from 'snabbdom/modules/attributes'
// 2. 注册模块
let patch = init([
  style,
  attributes,
  eventlisteners
])

let list = [
  { rank: 8, title: 'The Good, the Bad and the Ugly', description: 'A bounty hunting SCam JolnS two men in an uneasy a lliance againsta third in a race to fi n d a fo rtu ne In gold buried in a remote cemetery.' },
  { rank: 7, title: '12 Angry Men', description: 'A dissenting juror ina murder trial slowly manages to 7 12AngryMen COnVlnCe C 1 ear as it the others that the court.' },
  { rank: 10, title: 'Fight Club', description: 'An insomniac office worker Iooking for a way to change his life crosses paths with a devil 一 may 一 care soap maker and they form an underground fight club that evolves into something much , much more … ' }
]

let vnode = null

const sortItem = (type) => {
  list.sort((a, b) => {
    if (type === 'rank') return a[type] - b[type]
    return a[type].localeCompare(b[type])
  })
  vnode = patch(vnode, wrapNode(list))
}
const removeItem = (rank) => {
  list = list.filter(item => item.rank !== rank)
  vnode = patch(vnode, wrapNode(list))
}
const addItem = () => {
  const ranks = list.map(item => item.rank)
  const maxRank = ranks.length > 0 ? Math.max(...ranks) : 0
  list.unshift({
    rank: maxRank + 1, 
    title: 'The Good, the Bad and the Ugly', 
    description: 'A bounty hunting SCam JolnS two men in an uneasy a lliance againsta third in a race to fi n d a fo rtu ne In gold buried in a remote cemetery.'
  })
  vnode = patch(vnode, wrapNode(list))
}

const renderHeader = (title) => {
  return h('div', {
    style: {
      fontSize: '22px',
      marginBottom: '10px',
      color: '#fff'
    },
  }, title)
}
const renderItem = ({rank, title, description}, isLast) => {
  return h('div', {
    // key: rank,
    style: {
      display: 'flex',
      padding: '16px 0',
      position: 'relative',
      borderBottom: `${isLast ? '0' : '1px'} solid #464646`
    }
  }, [
    h('div', { style: { flex: 1 }}, rank),
    h('div', { style: { flex: 3 }}, title),
    h('div', { style: { flex: 10 }}, description),
    h('a', { 
      style: { position: 'absolute', top: '3px', right: '4px', cursor: 'pointer' },
      on: { click: [removeItem, rank] }
    }, 'x'),
    h('input', {
      attrs: {
        type: 'checkbox',
        value: 'value'
      }
    }, '备选项'),
    h('span', rank)
  ])
}
const renderList = (list) => {
  return h('div', list.map((item, i) => renderItem(item, i === list.length-1)))
}
const renderSort = () => {
  return h('div', {
    style: {
      display: 'flex'
    }
  }, [
    h('div', {style: { color: '#fff' }}, 'Sort by:'),
    ...['Rank', 'Title', 'Description'].map(txt => {
      return h('div', {
        style: { marginLeft: '10px', cursor: 'pointer' },
        on: {
          click: [sortItem, txt.toLowerCase()]
        }
      }, txt)
    })
  ])
}
const renderAddItem = () => {
  return h('a', {
    style: {
      position: 'absolute',
      right: '0',
      top: '0',
      cursor: 'pointer'
    },
    on: {
      click: addItem
    }
  }, 'Add')
}
const wrapNode = (list) => {
  return h('div', {
    style: {
      backgroundColor: '#000',
      padding: '20px 30px',
      fontFamily: 'arial',
      color: '#cecece',
      fontSize: '12px',
      width: '578px',
      margin: '0 auto'
    }
  }, [
    renderHeader('Top 10 movies'),
    h('div', {
      style: {
        position: 'relative',
        margin: '10px 0'
      }
    }, [
      renderSort(),
      renderAddItem()
    ]),
    renderList(list)
  ])
}
const app = document.querySelector('#app')
vnode = patch(app, wrapNode(list))